<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>mozihao - mozihao</title><meta name="keywords" content="mozihao github"><meta name="author" content="mozihao"><meta name="copyright" content="mozihao"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="if you risk nothing,then you risk anthing">
<meta property="og:type" content="website">
<meta property="og:title" content="mozihao">
<meta property="og:url" content="https://mo_zi_hao.gitee.io/blog/page/2/index.html">
<meta property="og:site_name" content="mozihao">
<meta property="og:description" content="if you risk nothing,then you risk anthing">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E6%B5%B7%E8%B4%BC008.jpg">
<meta property="article:author" content="mozihao">
<meta property="article:tag" content="mozihao github">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E6%B5%B7%E8%B4%BC008.jpg"><link rel="shortcut icon" href="/blog/img/favicon.png"><link rel="canonical" href="https://mo_zi_hao.gitee.io/blog/page/2/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/blog/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/blog/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2023-02-18 10:53:31'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    })(window)</script><link rel="stylesheet" type="text/css" href="./css/iconfont.css" media="all"><meta name="generator" content="Hexo 5.4.2"><link rel="alternate" href="/blog/atom.xml" title="mozihao" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E6%B5%B7%E8%B4%BC008.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/blog/archives/"><div class="headline">文章</div><div class="length-num">24</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/blog/tags/"><div class="headline">标签</div><div class="length-num">16</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/blog/categories/"><div class="headline">分类</div><div class="length-num">11</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/blog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/blog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/blog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/blog/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/blog/about/"><i class="fa-fw fas fa-heart"></i><span> 前端知识思维导图</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E6%B5%B7%E8%B4%BC4.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/blog/">mozihao</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/blog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/blog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/blog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/blog/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/blog/about/"><i class="fa-fw fas fa-heart"></i><span> 前端知识思维导图</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">mozihao</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://gitee.com/mo_zi_hao" target="_blank" title="Gitee"><i class="fab iconfont icon-gitee-fill-round"></i></a><a class="social-icon" href="https://github.com/mmCrazy" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://blog.csdn.net/xiaomohhh?spm=1001.2101.3001.5343" target="_blank" title="CSDN"><i class="fab iconfont icon-csdn"></i></a><a class="social-icon" href="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/qrcode_for_gh_d35478eda980_430.jpg" target="_blank" title="公众号"><i class="fab iconfont icon-weixingongzhonghao"></i></a><a class="social-icon" href="mailto:747304031@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left_radius"><a href="/blog/posts/43904/" title="pc、h5项目踩坑">     <img class="post_bg" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/4560.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="pc、h5项目踩坑"></a></div><div class="recent-post-info"><a class="article-title" href="/blog/posts/43904/" title="pc、h5项目踩坑">pc、h5项目踩坑</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-29T15:22:14.597Z" title="发表于 2021-08-29 23:22:14">2021-08-29</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/blog/categories/%E9%A1%B9%E7%9B%AE%E8%B8%A9%E5%9D%91/">项目踩坑</a></span></div><div class="content">html2canvas插件的使用—–分享海报绘制功能安装依赖：
1npm install --save html2canvas



html:
123&lt;div id=&quot;posters&quot;&gt;    dom画布内容&lt;/div&gt;

js
1234567891011121314151617181920212223242526272829303132333435&lt;script&gt;import html2canvas from &#x27;html2canvas&#x27;;data:&#123;  return &#123;      canvasImg: &quot;&quot;  &#125;  &#125;,methods:&#123;    loadingPosters() &#123;                if (this.canvasImg) &#123;                    return                &#125;                //解决截图不全问题           ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/blog/posts/33426/" title="git项目管理总结">     <img class="post_bg" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/000.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="git项目管理总结"></a></div><div class="recent-post-info"><a class="article-title" href="/blog/posts/33426/" title="git项目管理总结">git项目管理总结</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-29T15:22:14.596Z" title="发表于 2021-08-29 23:22:14">2021-08-29</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/blog/categories/Git/">Git</a></span></div><div class="content">开发中的运用一般的在多人开发的过程中，一开机我们开始需要先git pull拉取一下远程的代码，再进行编写
当我们一顿操作写完代码之后
基本操作12345678910111213&#x2F;&#x2F;先查看一下我们的修改的代码的文件，是否是正确git status&#x2F;&#x2F;下面将想要提交的文件add一遍，下面的 ‘.‘ 表示修改的所有文件，当然你也可以一个一个的add，看一下上一步的路径将 ’.‘ 替换为对应的路径就好了git add .&#x2F;&#x2F;再查看一下状态，是否是预期add的文件，一般的我都会去vscode再次确认自己所修改的东西是否正确，会不会有什么测试代码没去除的git status&#x2F;&#x2F;下边将代码保存到本地，下面的注释可能大家的规范也不太一致，我是用fix代表的修复bug，只举个例子，注释清晰，才好复查每个提交的记录git commit -m &quot;fix：修复什么什么&quot;&#x2F;&#x2F;拉取一下远程代码，有冲突则解决冲突git pull（如果有冲突解决冲突保存文件之后要再add一次和commit一次）：g ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/blog/posts/16107/" title="hexo发布命令">     <img class="post_bg" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E6%B5%B7%E8%B4%BC4.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="hexo发布命令"></a></div><div class="recent-post-info"><a class="article-title" href="/blog/posts/16107/" title="hexo发布命令">hexo发布命令</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-29T15:22:14.596Z" title="发表于 2021-08-29 23:22:14">2021-08-29</time></span></div><div class="content">Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new &quot;My New Post&quot;

More info: Writing
Run server1$ hexo server

More info: Server
Generate static files1$ hexo generate

More info: Generating
Deploy to remote sites1$ hexo deploy

More info: Deployment
</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/blog/posts/7457/" title="设计模式-策略模式">     <img class="post_bg" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/0.png" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="设计模式-策略模式"></a></div><div class="recent-post-info"><a class="article-title" href="/blog/posts/7457/" title="设计模式-策略模式">设计模式-策略模式</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-03-26T06:18:57.000Z" title="发表于 2021-03-26 14:18:57">2021-03-26</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/blog/categories/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">设计模式</a></span></div><div class="content">策略模式定义：定义一系列的算法，把他们封装起来，并且使他们可以相互替换
真人真事：大型车祸现场自我检讨一下，这是我翻了一下我以前在项目写的一段垃圾代码，是使用适当的单位来换算出带单位的文件大小，下面套用了几个if else的语句，可读性差，不美观，不利于扩展，看了想打人！！！
123456789fileSizeFilter(size) &#123;   if (size &lt; 1024) &#123;       return size + &#x27;B&#x27;    &#125; else if (size / 1024 &lt; 1024) &#123;       return `$&#123;(size % 1024) ? (size / 1024 ).toFixed(2) : (size / 1024)&#125;KB`    &#125; else &#123;       return `$&#123;((size / 1024) % 1024) ? (size / 1024 / 1024 ).toFixed(2) : (size / 1024 / 1024)& ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/blog/posts/19482/" title="设计模式-单例模式">     <img class="post_bg" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/0.png" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="设计模式-单例模式"></a></div><div class="recent-post-info"><a class="article-title" href="/blog/posts/19482/" title="设计模式-单例模式">设计模式-单例模式</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-03-25T06:18:57.000Z" title="发表于 2021-03-25 14:18:57">2021-03-25</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/blog/categories/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">设计模式</a></span></div><div class="content">单例模式定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。
应用场景： 弹窗     —–     无论点击多少次都只被创建一次
实现方式： 先判断类是否被创建过对象，已创建则复用该对象，否则创建一个新对象
实现单例：12345678910111213function person(name)&#123;    this.name = name    this.instance = null    //先初始化实例为null&#125;person.getInstance = function(name) &#123;    if(!this.instance)&#123;    //判断是否已创建对象        this.instance = new person(name)    &#125;    return this.instance&#125;var a = person.getInstance(&#x27;小明&#x27;)

透明的单例模式：将创建这个单一对象的创建的整个流程都封装在一个类里面，就按平常创建的时候就像平常普通类一样
123456789101 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/blog/posts/28371/" title="node.js --- Buffer">     <img class="post_bg" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E8%8B%B1%E8%AF%AD%E5%AD%A6%E4%B9%A0%E8%8B%B1%E6%A0%87%E5%A4%A7%E5%85%A8.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="node.js --- Buffer"></a></div><div class="recent-post-info"><a class="article-title" href="/blog/posts/28371/" title="node.js --- Buffer">node.js --- Buffer</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-06-20T06:18:57.000Z" title="发表于 2020-06-20 14:18:57">2020-06-20</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/blog/categories/node/">node</a></span></div><div class="content">在node中,应用需要处理网络协议、操作数据库、处理图片、接受上传文件等，在网络流和文件的操作中，还要处理大量二进制数据，javaScript自有的字符串远远不能满足这些需求，于是buffer对象应运而生
「buffer是一个像Array的对象，但它主要用于操作字节」。
buffer 是一个javascript与c++结合，buffer所占用的 内存不是通过V8分配的，属于堆外内存，由于V8垃圾回收性能的影响，将常用的操作对象用更高效和专有的内存分配回收策略来管理

buffer对象buffer元素为 16进制的两位数，即0到255的数值
123var str = &#x27;hello world,你好&#x27;var strBuffer = new buffer(str,&#x27;utf-8&#x27;)console.log(strBuffer)   //&lt;Buffer 68 65 6c 6c 6f 20 77 6f 72 6c 64 2c e4 bd a0 e5 a5 bd&gt;

不同的编码的字符串占用的元素个数各不相同，上面的代码打印出的中文字在 utf-8编码 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/blog/posts/25418/" title="node.js学习总结">     <img class="post_bg" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E8%8B%B1%E8%AF%AD%E5%AD%A6%E4%B9%A0%E8%8B%B1%E6%A0%87%E5%A4%A7%E5%85%A8.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="node.js学习总结"></a></div><div class="recent-post-info"><a class="article-title" href="/blog/posts/25418/" title="node.js学习总结">node.js学习总结</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-06-08T06:18:57.000Z" title="发表于 2020-06-08 14:18:57">2020-06-08</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/blog/categories/node/">node</a></span></div><div class="content">CommomJS规范: 外部的引用exports和module.exports终端创建文件: touch 文件名

exports//dome.js
123456789101112console.log(&quot;dome&quot;);exports.hello = &quot;hello&quot;;exports.add = function(a, b) &#123;    return a + b;&#125;;exports.person = &#123;    name: &quot;小明&quot;&#125;;setTimeout(() =&gt; &#123;    // 这里能打印出外部引用添加的exports的变量    console.log(exports);&#125;, 2000);

//index.js
12345console.log(&quot;start&quot;);var dome = require(&#x27;./dome.js&#x27;)console.log(&quot;end&quot;,dome);// 同一个引用外部可以改变 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/blog/posts/15317/" title="CSS-3D动画旋转展示">     <img class="post_bg" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E6%94%B6%E7%9B%8A%E6%8E%92%E8%A1%8C%E6%A6%9C.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="CSS-3D动画旋转展示"></a></div><div class="recent-post-info"><a class="article-title" href="/blog/posts/15317/" title="CSS-3D动画旋转展示">CSS-3D动画旋转展示</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-05-27T06:18:57.000Z" title="发表于 2020-05-27 14:18:57">2020-05-27</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/blog/categories/css/">css</a></span></div><div class="content">3D图片旋转展示下面是6个div放置6张周围旋转的图,html如下
12345678&lt;section&gt;    &lt;div&gt;&lt;/div&gt;    &lt;div&gt;&lt;/div&gt;    &lt;div&gt;&lt;/div&gt;    &lt;div&gt;&lt;/div&gt;    &lt;div&gt;&lt;/div&gt;    &lt;div&gt;&lt;/div&gt;&lt;/section&gt;
下面是css样式,body样式为 perspective: 1000px;添加透视效果
123body &#123;    perspective: 1000px;&#125;
section里面放置里面的一张图和设置3d透视
123456789section &#123;    margin: 100px auto;    width: 450px;    height: 300px;    background: url(untitled/2.jpg) no-repeat;    transform-style: pr ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/blog/posts/57409/" title="浅谈web性能">     <img class="post_bg" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E6%B5%B7%E8%B4%BC4.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="浅谈web性能"></a></div><div class="recent-post-info"><a class="article-title" href="/blog/posts/57409/" title="浅谈web性能">浅谈web性能</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-05-27T06:18:57.000Z" title="发表于 2020-05-27 14:18:57">2020-05-27</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/blog/categories/web%E6%80%A7%E8%83%BD/">web性能</a></span></div><div class="content"> 度量 Web性能的一个重要指标就是页面内容实际显示在屏幕上需要多久。这个指标有时候也叫 “渲染时间” 或者 “上屏时间”。现代浏览器在屏幕上渲染之前，至少需要两样东西：HTML和CSS。这意味着让浏览器尽快下载HTML和全部CSS极其重要。==浏览器只有掌握了布局页面的全部CSS信息，才能给出最佳响应。== 因为只有这样，他们才知道应该把页面渲染成什么样，从而一次性地把页面绘制到屏幕上，而==非一边加载新样式一边重新调整页面==
1、减少HTTP请求在链接外部样式表时，==保证链接的文件数量最少==至关重要，==因为每个文件都需要单独发送一次HTTP请求==。相应地，每次服务器请求文件，浏览器需要花一定的时间下载，然后还要花时间应用其中的样式。另外，额外的HTTP请求也意味着浏览器会向服务器发送多余的数据，比如cookie或请求首部。服务器也必须针对每个请求返回响应首部。服务器也必须针对每个请求返回响应首部。==两个文件要比一个包含相同CSS内容的文件在浏览器和服务器间传递的数据更多。==
==所以线上网页最好把需要加载的CSS文件控制在 1 或 2 个==。只能一个 link 元素 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/blog/posts/60191/" title="css多列布局column">     <img class="post_bg" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E6%94%B6%E7%9B%8A%E6%8E%92%E8%A1%8C%E6%A6%9C.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="css多列布局column"></a></div><div class="recent-post-info"><a class="article-title" href="/blog/posts/60191/" title="css多列布局column">css多列布局column</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-05-26T06:18:57.000Z" title="发表于 2020-05-26 14:18:57">2020-05-26</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/blog/categories/css/">css</a></span></div><div class="content">下面由我用一个小案例来讲解一下   多列布局—columncolumn-count: 3;   —-设置列数(此处列数为3列)column-rule: dashed 3px red; —–添加列间隙样式(与边框样式添加一样，此处宽度为3px的红色虚线)column-gap: 50px;—-设置列间隙大小(此处列宽为50px)column-span: all;—-设置跨列显示(此处为跨所有列显示)column-width: 300px;—-设置列宽(此处列宽为300px)设置列宽的原则:取大优先1.如果认为设置宽度更大,则取更大的值,但是会填充整个屏幕,意味最终的宽度可能也会大于设置的宽度—–填充满整个屏幕  2.如果人为设置宽度更小,使用默认计算的宽度首先下面是html
123456&lt;div class=&quot;wrapper&quot;&gt;	&lt;h4&gt;标题&lt;/h4&gt;	&lt;p&gt;	几你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美你太美 ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/blog/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/blog/">1</a><span class="page-number current">2</span><a class="page-number" href="/blog/page/3/#content-inner">3</a><a class="extend next" rel="next" href="/blog/page/3/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E6%B5%B7%E8%B4%BC008.jpg" onerror="this.onerror=null;this.src='/blog/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">mozihao</div><div class="author-info__description">if you risk nothing,then you risk anthing</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/blog/archives/"><div class="headline">文章</div><div class="length-num">24</div></a></div><div class="card-info-data-item is-center"><a href="/blog/tags/"><div class="headline">标签</div><div class="length-num">16</div></a></div><div class="card-info-data-item is-center"><a href="/blog/categories/"><div class="headline">分类</div><div class="length-num">11</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://gitee.com/mo_zi_hao"><i class="iconfont icon-gitee-fill-round"></i><span>我的Gitee</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://gitee.com/mo_zi_hao" target="_blank" title="Gitee"><i class="fab iconfont icon-gitee-fill-round"></i></a><a class="social-icon" href="https://github.com/mmCrazy" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://blog.csdn.net/xiaomohhh?spm=1001.2101.3001.5343" target="_blank" title="CSDN"><i class="fab iconfont icon-csdn"></i></a><a class="social-icon" href="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/qrcode_for_gh_d35478eda980_430.jpg" target="_blank" title="公众号"><i class="fab iconfont icon-weixingongzhonghao"></i></a><a class="social-icon" href="mailto:747304031@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">如文章中有哪些错漏，欢迎各位前端的大佬与我交流并指正，谢谢!!</br>邮箱：747304031@qq.com</br>公众号：一起写前端bug</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/blog/posts/1/" title="无题"><img src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E6%B5%B7%E8%B4%BC4.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="无题"/></a><div class="content"><a class="title" href="/blog/posts/1/" title="无题">无题</a><time datetime="2022-06-05T05:20:17.974Z" title="发表于 2022-06-05 13:20:17">2022-06-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/posts/36549/" title="编写可维护的JavaScript (代码习惯)"><img src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/%E6%B5%B7%E8%B4%BC4.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="编写可维护的JavaScript (代码习惯)"/></a><div class="content"><a class="title" href="/blog/posts/36549/" title="编写可维护的JavaScript (代码习惯)">编写可维护的JavaScript (代码习惯)</a><time datetime="2022-03-19T03:12:42.624Z" title="发表于 2022-03-19 11:12:42">2022-03-19</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/posts/23125/" title="gitlab-cicd"><img src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/745.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="gitlab-cicd"/></a><div class="content"><a class="title" href="/blog/posts/23125/" title="gitlab-cicd">gitlab-cicd</a><time datetime="2021-12-20T14:00:59.661Z" title="发表于 2021-12-20 22:00:59">2021-12-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/posts/449/" title="前端js基础"><img src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/26&amp;gp=0.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="前端js基础"/></a><div class="content"><a class="title" href="/blog/posts/449/" title="前端js基础">前端js基础</a><time datetime="2021-08-29T15:22:14.600Z" title="发表于 2021-08-29 23:22:14">2021-08-29</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/posts/35506/" title="微信小程序"><img src="https://gitee.com/mo_zi_hao/picsBed/raw/master/image/1234.jpg" onerror="this.onerror=null;this.src='/blog/img/404.jpg'" alt="微信小程序"/></a><div class="content"><a class="title" href="/blog/posts/35506/" title="微信小程序">微信小程序</a><time datetime="2021-08-29T15:22:14.600Z" title="发表于 2021-08-29 23:22:14">2021-08-29</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
            <i class="fas fa-folder-open"></i>
            <span>分类</span>
            <a class="card-more-btn" href="/blog/categories/" title="查看更多">
    <i class="fas fa-angle-right"></i></a>
            </div>
            <ul class="card-category-list" id="aside-cat-list">
            <li class="card-category-list-item "><a class="card-category-list-link" href="/blog/categories/Git/"><span class="card-category-list-name">Git</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/blog/categories/JavaScript/"><span class="card-category-list-name">JavaScript</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/blog/categories/css/"><span class="card-category-list-name">css</span><span class="card-category-list-count">6</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/blog/categories/node/"><span class="card-category-list-name">node</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/blog/categories/vue/"><span class="card-category-list-name">vue</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/blog/categories/webpack/"><span class="card-category-list-name">webpack</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/blog/categories/web%E6%80%A7%E8%83%BD/"><span class="card-category-list-name">web性能</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/blog/categories/%E5%8D%9A%E5%AE%A2/"><span class="card-category-list-name">博客</span><span class="card-category-list-count">1</span></a></li>
            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/blog/tags/3D%E5%8A%A8%E7%94%BB/" style="font-size: 1.1em; color: #999">3D动画</a> <a href="/blog/tags/Buffer/" style="font-size: 1.1em; color: #999">Buffer</a> <a href="/blog/tags/Git%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%8F%91%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86/" style="font-size: 1.1em; color: #999">Git项目开发版本管理</a> <a href="/blog/tags/JavaScript%E5%9F%BA%E7%A1%80/" style="font-size: 1.1em; color: #999">JavaScript基础</a> <a href="/blog/tags/Shapes/" style="font-size: 1.1em; color: #999">Shapes</a> <a href="/blog/tags/css%E7%BB%A7%E6%89%BF%E5%8F%8A%E4%BC%98%E5%85%88%E7%BA%A7/" style="font-size: 1.1em; color: #999">css继承及优先级</a> <a href="/blog/tags/flex/" style="font-size: 1.1em; color: #999">flex</a> <a href="/blog/tags/node-js/" style="font-size: 1.1em; color: #999">node.js</a> <a href="/blog/tags/pc%E3%80%81h5%E9%A1%B9%E7%9B%AE/" style="font-size: 1.1em; color: #999">pc、h5项目</a> <a href="/blog/tags/vue%E6%BA%90%E7%A0%81/" style="font-size: 1.5em; color: #99a9bf">vue源码</a> <a href="/blog/tags/webpack4-vue-cli3/" style="font-size: 1.1em; color: #999">webpack4+vue-cli3</a> <a href="/blog/tags/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F%EF%BC%8C%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F/" style="font-size: 1.1em; color: #999">单例模式，策略模式</a> <a href="/blog/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" style="font-size: 1.1em; color: #999">博客搭建</a> <a href="/blog/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" style="font-size: 1.1em; color: #999">微信小程序</a> <a href="/blog/tags/%E6%B5%85%E8%B0%88web%E6%80%A7%E8%83%BD/" style="font-size: 1.1em; color: #999">浅谈web性能</a> <a href="/blog/tags/%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F/" style="font-size: 1.1em; color: #999">策略模式</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/blog/archives/2022/06/"><span class="card-archive-list-date">六月 2022</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/blog/archives/2022/03/"><span class="card-archive-list-date">三月 2022</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/blog/archives/2021/12/"><span class="card-archive-list-date">十二月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/blog/archives/2021/08/"><span class="card-archive-list-date">八月 2021</span><span class="card-archive-list-count">8</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/blog/archives/2021/03/"><span class="card-archive-list-date">三月 2021</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/blog/archives/2020/06/"><span class="card-archive-list-date">六月 2020</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/blog/archives/2020/05/"><span class="card-archive-list-date">五月 2020</span><span class="card-archive-list-count">7</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/blog/archives/2020/04/"><span class="card-archive-list-date">四月 2020</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">24</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">56k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2023-02-18T02:53:30.807Z"></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By mozihao</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/blog/js/utils.js"></script><script src="/blog/js/main.js"></script><script src="/blog/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/blog/js/search/local-search.js"></script><div class="js-pjax"><script>function subtitleType () {
  if (true) { 
    var typed = new Typed("#subtitle", {
      strings: "如果你不冒任何风险，则存在失去所有的风险,if you risk nothing，then you risk anthing".split(","),
      startDelay: 300,
      typeSpeed: 150,
      loop: true,
      backSpeed: 50
    })
  } else {
    document.getElementById("subtitle").innerHTML = '如'
  }
}

if (true) {
  if (typeof Typed === 'function') {
    subtitleType()
  } else {
    getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
  }
} else {
  subtitleType()
}</script></div><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js" async="async" mobile="false"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>